<#import path="/Sport.class,/AutoLayout.class" root="{{LAM.classPath}}" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <script type="text/javascript">
        LAMJS.run(function() {
            'use strict';
            var System=this;
            System.use();
            System.Loader
                    .load({
                        'baseUrl':System._ROOT_,
                        'css':[
                             '/common/plugins/bootstrap/bootstrap'
                            ,'/common/css/lib/global'
                        ]
                    }).print();



        });
    </script>


    <style type="text/css">
        .w-page{}
        html,body,#container,.sidbar,.content{height:100%;}
        #container{}
        .sidbar{width:200px;position: absolute;top:0;left:0;background:red;}
        .sidbar2{width:300px;left:auto; right:0;background:blue;}
        #content{margin-left:210px;background:green;}
        .content{width:100%;overflow: hidden;}
        #content1{margin:0;width:100%;}
        .ul{width:100%;padding:0;}
        .ul li{background:#ccc;min-height:250px;overflow: hidden;}
        #ul2 li{background:#f60;}

    </style>

</head>

<body>
<!--嵌套三层 每一层是一个对象-->
<div id="container" class="">
    <div class="sidbar"><#include tp-data="{'content':'this is include'}" file="{{LAM.VIEWS}}/include/test.html" dataType="html" /></div>

    <div class="content over-h" id="content">
        <div class="P10">
            <ul id="ul1" class="ul sectionFloat clearfix">
                <li>

                    <div class="content" style="border:4px solid #f60;">
                        <ul id="ul2" class="ul sectionFloat clearfix">
                            <li style="background: yellow">
                                <div class="content" style="border:4px solid #000;">
                                    <ul id="ul3" class="ul sectionFloat clearfix">
                                        <li style="background: yellow">
                                            <div class="P10"> {{D.title}}</div>
                                        </li>
                                        <li style="background:deeppink;">
                                            <div class="P10">{{D.content}}</div>

                                        </li>

                                    </ul>
                                </div>
                            </li>
                            <li style="background:lightseagreen;">
                                <div class="P10">{{D.content}}</div>

                            </li>

                        </ul>

                    </div>
                </li>
                <li>
                    <div class="H100 M20 P10" style="background: #fff;">{{D.content}}</div>
                </li>
                <li>
                    <div class="H100 M20 P10" style="background: #fff;">{{D.content}}</div>
                </li>
                <li>
                    <div class="H100 M20 P10" style="background: #fff;">{{D.content}}</div>
                </li>

            </ul>
        </div>


    </div>
    <div class="sidbar sidbar2">

    </div>
</div>

</body>
</html>


<script type="text/javascript">
    LAMJS.run(function(){
        'use strict';
        var System=this;

        var content,content1,ul1,ul2,content2,ul3;
        function layout(){
            $('#content').width($(window).width()-($('.sidbar').width()+$('.sidbar2').width()+20));
            content=new System.AutoLayout({'$view':$('#content'),'position':'left'}).run();

            ul1=new System.AutoLayout({'$ul':$('#ul1'),'$view':$('#ul1'),'$li':$('#ul1 > li'),'vcount':$('#ul1 > li').length,'position':'left'}).run();
            ul2=new System.AutoLayout({'parent':ul1,'$ul':$('#ul2'),'$view':$('#ul2'),'$li':$('#ul2 > li'),'vcount':$('#ul2 > li').length, 'position':'left'}).run();
            ul3=new System.AutoLayout({'parent':ul2,'$ul':$('#ul3'),'$view':$('#ul3'),'$li':$('#ul3 > li'),'vcount':$('#ul3 > li').length, 'position':'left'}).run();




        }
        $(function(){

            layout();

        });





        $(window).resize(function(){
            content.resize();
            ul1.resize();
            ul2.resize();
            ul3.resize();


        });



    });


</script>